<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/elementui/index.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/orderset.css">
    <!-- 引入组件库 -->
    <script src="../../js/vue.js"></script>
    <script src="../../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>预约管理
            <small>预约设置</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约设置</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="box ordersetting">
                <el-card class="box-card">
                    <div class="boxMain">
                        <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary"
                                   @click="downloadTemplate()">模板下载
                        </el-button>
                        <el-upload action="/hello/orderSetting/upload.do"
                                   name="excelFile"
                                   :show-file-list="false"
                                   :on-success="handleSuccess"
                                   :before-upload="beforeUpload">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                    </div>
                    <div>
                        操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                    </div>
                </el-card>
                <div class="calendar">
                    <!-- 年份 月份 -->
                    <div class="month">
                        <div class="currentdate">
                            <span class="choose-year">{{ currentYear }}年</span>
                            <span class="choose-month">{{ currentMonth }}月</span>
                        </div>
                        <div class="choose">
                            <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                            <span @click="pickPre(currentYear,currentMonth)">❮</span>
                            <span @click="pickNext(currentYear,currentMonth)">❯</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <!-- 星期 -->
                    <div class="caldate">
                        <ul class="weekdays">
                            <li>周一</li>
                            <li>周二</li>
                            <li>周三</li>
                            <li>周四</li>
                            <li>周五</li>
                            <li>周六</li>
                            <li>周日</li>
                        </ul>
                        <!-- 日期 -->
                        <ul class="days">
                            <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                            <li v-for="dayObject in days">
                                <template>
                                    <!-- 非当前月份 -->
                                    <div class="other-month" v-if="dayObject.day.getMonth()+1 != currentMonth">
                                        {{ dayObject.day.getDate() }}
                                    </div>
                                    <!-- 当前月 -->
                                    <div class="everyday" v-if="dayObject.day.getMonth()+1 == currentMonth">
                                        <span class="datenumber">{{ dayObject.day.getDate()}}</span>

                                        <template>
                                            <template v-for="obj in leftObj">
                                                <template v-if="obj.date == dayObject.day.getDate()">
                                                    <template v-if="obj.number > obj.reservations">
                                                        <div class="usual" v-if="dayObject.day > today"
                                                             @mouseenter="showSettingBut(dayObject.day)"
                                                             @mouseleave="hideSettingBut()">
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                        </div>
                                                        <div class="usual" v-else="dayObject.day < today">
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                        </div>
                                                    </template>
                                                    <template v-else>
                                                        <div class="fulled" v-if="dayObject.day > today"
                                                             @mouseenter="showSettingBut(dayObject.day)"
                                                             @mouseleave="hideSettingBut()">
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                            <p>已满</p>
                                                        </div>
                                                        <div class="fulled" v-else="dayObject.day < today">
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                            <p>已满</p>
                                                        </div>
                                                    </template>
                                                </template>
                                            </template>
                                            <button v-if="dayObject.day > today"
                                                    @click="handleOrderSet(dayObject.day)"
                                                    :visible.sync="flag"
                                                    v-show="dayObject.day == date"
                                                    @mouseover="showSettingBut(dayObject.day)"
                                                    class="orderbtn">设置
                                            </button>
                                        </template>
                                    </div>
                                </template>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../../js/vue.js"></script>
<script src="../../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            today: new Date(),//当前日期
            currentDay: 1,
            currentMonth: 1,
            LocalMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],//当前页面上显示的天数（包括本月所有天和其他月的占格子的天数）
            leftObj: [],//用于装载页面显示的月份已经进行预约设置的数据
            flag: false,
            date: new Date()
        },
        mounted() {//在vue初始化时调用
            this.initData(null);
        },
        methods: {

            //预约设置
            handleOrderSet(day) {

                //当点击了预约div的设置按钮之后弹出一个输入的文本框
                this.$prompt('请输入可预约人数', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[1-5]{0,1}[0-9]{0,1}[0-9]{0,1}$/,
                    inputErrorMessage: '可预约人数必须输入数字且不能大于500！'
                }).then(({value}) => {

                    if (value == null
                    ) {
                        value = 0;
                    }

                    var params = {
                        number: value,
                        orderDate: this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate())
                    };

                    var date = this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate());

                    axios.post("/hello/orderSetting/setOrderPeopleNumber.do", params).then((res) => {
                        if (res.data.flag
                        ) {

                            this.leftObj.number = value;
                            this.$message({
                                type: "success",
                                message: "设置可预约人数成功!" + date + "可预约" + value + "人"
                            });
                            this.initData(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1))
                        }
                        else {
                            this.$message.error(res.data.message);
                        }
                    })
                    ;

                }).catch(() => {
                    this.$message("已取消");
                })
                ;
            },

            //显示设置按钮
            showSettingBut(day) {
                this.date = day;
            }
            ,

            //隐藏设置按钮
            hideSettingBut() {
                this.date = '';
            }
            ,

            //上传之前进行文件格式校验，通过正则表达式进行匹配验证
            beforeUpload(file) {
                var regexp1 = /^\w+.xls$/;
                const isXLS = regexp1.test(file.name);
                if (isXLS) {
                    return true;
                }
                var regexp2 = /^\w+.xlsx$/;
                const isXLSX = regexp2.test(file.name);
                if (isXLSX) {
                    return true;
                }
                this.$message.error('上传文件只能是xls或者xlsx格式!');
                return false;
            }
            ,

            //下载模板文件
            downloadTemplate() {
                //浏览器无法直接打开的文件类型，会直接下载到本地下载目录
                window.location.href = "../../template/ordersetting_template.xlsx";
            }
            ,

            //上传成功提示
            handleSuccess(response, file) {
                if (response.flag) {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                } else {
                    this.$message.error(response.message);
                }
                // console.log(response, file);
            }
            ,

            //初始化当前页要展示的日期
            initData: function (cur) {
                var date;
                var index = 0;   //控制显示预定的天数
                if (cur) {
                    date = new Date(cur);
                } else {
                    var now = new Date();
                    var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
                    d.setDate(35);
                    date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                }
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;
                this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
                var today = new Date();
                this.LocalMonth = today.getMonth() + 1;
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                this.days.length = 0;
                // 今天是周日，放在第一行第7个位置，前面6个
                //初始化本周
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    var dayObject = {};
                    dayObject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayObject.index = index++;//从今天开始显示供预定的数量
                    }
                    else if (index != 0 && index < 3)
                        dayObject.index = index++;//从今天开始3天内显示供预定的数量
                    this.days.push(dayObject);//将日期放入data 中的days数组 供页面渲染使用
                }
                //其他周
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayObject = {};//dayObject   {day:date,index:2}
                    dayObject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayObject.index = index++;
                    }
                    else if (index != 0 && index < 3)
                        dayObject.index = index++;
                    this.days.push(dayObject);
                }

                axios.post("/hello/orderSetting/getOrderSettingByMonth.do?currentMonth=" +
                    this.currentYear + "-" + this.currentMonth).then((res) => {
                    if (res.data.flag
                    ) {
                        this.leftObj = res.data.data;
                    }
                    else {
                        this.$message.error(res.data.message);
                    }
                })
                ;
            }
            ,

            //切换到当前月份
            goCurrentMonth: function (year, month) {
                var d = new Date();
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            }
            ,

            //向前一个月
            pickPre: function (year, month) {
                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒数第二天
                // setDate(dx) 参数dx为 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            }
            ,

            //向后一个月
            pickNext: function (year, month) {
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(35);////获取指定天之后的日期
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            }
            ,

            // 返回 类似 2016-01-02 格式的字符串
            formatDate(year, month, day) {
                var y = year;
                var m = month;
                if (m < 10) m = "0" + m;
                var d = day;
                if (d < 10) d = "0" + d;
                return y + "-" + m + "-" + d
            }
        }
    })
</script>
</html>